<style scoped>
  @import '../../../static/style/CreateMarker_pop.css';
</style>

<template>
  <div class="marker-pop-main">
    <div class="marker-pop-head">
      <div class="marker-pop-head-title">
        添加标记
      </div>
      <div class="marker-pop-head-closeBtn" @click="popClose">
        <a>×</a>
      </div>
    </div>
    <div class="marker-pop-content" v-show="curContent">
      <div class="marker-pop-content-left">
        <div class="marker-pop-content-inputDiv">
          名称：<input class="marker-pop-content-input-up" placeholder="名称" v-model="name">
        </div>
        <div class="marker-pop-content-inputDiv">
          备注：<input class="marker-pop-content-input-down" placeholder="备注" v-model="notes">
        </div>
        <div class="marker-pop-content-button-content">
          <button @click="saveInfo">保存</button>
          <button>删除</button>
        </div>
      </div>
      <div class="marker-pop-content-right">
        <img style="height: 41px" :src="rightImgUrl">
        <a class="marker-pop-content-right-change" @click="changeIcon">更换</a>
      </div>
    </div>
    <div class="marker-pop-content" v-show="!curContent">
      <div class="marker-pop-content-left" style="width: 100%">
        <div class="marker-pop-content-iconDiv">
          <a class="marker-pop-content-iconDiv-item" v-for="(item,i) in iconUrlArr" @click="selectIt(item.url)">
            <img :src="item.url" alt="" style="height: 40px">
          </a>
        </div>

        <div class="marker-pop-content-button-content">
          <button @click="changeIcon">返回</button>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "CreateMarker_pop.vue",
    data(){
      return{
        curContent: true,//内容 | 图标
        iconUrlArr:[],
        rightImgUrl:"static/image/marker/marker-icon.png",//默认图标
        name:'',
        notes:'',
        markerPoint:Object
      }
    },
    created(){
      this.iconUrlArr = [
        {url:'static/image/marker/marker-icon.png'},
        {url:'static/image/marker/marker-icon.png'},
        {url:'static/image/marker/定位2_红色.png'},
        {url:'static/image/marker/定位2_绿色.png'},

      ]
    },
    methods:{
      openPrompt(marker){
        this.rightImgUrl = marker._message.url;
        this.name = marker._message.name;
        this.notes = marker._message.notes;
        this.markerPoint = marker
      },
      popClose(){
        this.$emit("click-close");
      },
      saveInfo(){
        this.$emit("save-change",{
          "url":this.rightImgUrl,
          "name":this.name,
          "notes":this.notes,
          "latlng":this.markerPoint._latlng,
        });
      },
      changeIcon(){
        this.curContent = !this.curContent
      },
      selectIt(url){
        console.log('点击')
        this.rightImgUrl = url;
        this.curContent = !this.curContent
      }
    }
  }
</script>

<style scoped>

</style>
